<template>
  <div class="data-page">
    <!-- 搜索栏 -->
    <el-row :gutter="20" class="search-bar">
      <el-col :span="6">
        <el-input v-model="searchKeyword" placeholder="输入球队名称搜索"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-col>
    </el-row>

    <!-- 数据表格 -->
    <el-table
        :data="filteredData"
        border
        stripe
        @sort-change="handleSort"
    >
      <el-table-column prop="rank" label="排名" width="80"></el-table-column>
      <el-table-column prop="team" label="球队"></el-table-column>
      <el-table-column prop="matches" label="比赛场次" sortable></el-table-column>
      <el-table-column prop="goals" label="进球数" sortable></el-table-column>
      <el-table-column prop="points" label="积分" sortable></el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],      // 原始数据
      filteredData: [],  // 过滤后数据
      searchKeyword: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      sortProp: '',       // 当前排序字段
      sortOrder: ''       // 排序顺序（ascending/descending）
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      // 模拟API请求
      this.tableData  = [
        { rank: 1, team: '曼城', matches: 38, goals: 83, points: 89 },
        { rank: 2, team: '利物浦', matches: 38, goals: 78, points: 86 },
        // ...更多数据
      ]
      this.total  = this.tableData.length
      this.filterData()
    },
    filterData() {
      // 过滤+排序逻辑
      let data = [...this.tableData]

      // 搜索过滤
      if (this.searchKeyword)  {
        data = data.filter(item  =>
            item.team.includes(this.searchKeyword)
        )
      }

      // 排序
      if (this.sortProp)  {
        data.sort((a,  b) => {
          const valA = a[this.sortProp]
          const valB = b[this.sortProp]
          return this.sortOrder  === 'ascending' ? valA - valB : valB - valA
        })
      }

      // 分页
      const start = (this.currentPage  - 1) * this.pageSize
      this.filteredData  = data.slice(start,  start + this.pageSize)
    },
    handleSort({ prop, order }) {
      this.sortProp  = prop
      this.sortOrder  = order
      this.filterData()
    },
    handleSizeChange(val) {
      this.pageSize  = val
      this.filterData()
    },
    handleCurrentChange(val) {
      this.currentPage  = val
      this.filterData()
    },
    handleSearch() {
      this.currentPage  = 1
      this.filterData()
    }
  }
}
</script>

<style scoped>
.data-page {
  padding: 20px;
}
.search-bar {
  margin-bottom: 20px;
}
</style>